<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的作业-作业详情</title>
	<link rel="stylesheet" type="text/css" href="css/mui_.css">
	<link rel="stylesheet" type="text/css" href="css/app.css">
	<link rel="stylesheet" href="css/mytasks.css">
	<link rel="stylesheet" href="css/left.css">
	<link rel="stylesheet" type="text/css" href="css/mui_.css">
	<link rel="stylesheet" href="css/header.css">
	<style type="text/css">
	.mui-card .mui-control-content {
		padding: 10px;
	}
			
	.mui-control-content {
		min-height: 300px;
	}
	.mui-cell-link{
		position: absolute;
		top: -25px;
		left: 800px;
	}
	</style>
</head>
<body>
<!-- 加载头部信息 -->
<?php
	include_once("headers.php");
?>

<!-- 中间内容 -->
<div class="content clearfloat">
	<!-- 左边内容 -->
	<div class="left_content">
		<ul class="left_nav" id="left_ul">
			<li><a href="notice.php" class="li_a">
				<span class="text">
					<?php echo "<img src='images/notice.png' alt='图片' class='left_img1'";?>&nbsp;
					<span>动&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</span>
				</span>
				<canvas id="canvas_index1" width="18" height="48"></canvas>	
			</a></li>
			<li class="active_nav"><a href="mytask.php" class="li_a">
				<span class="text">
					<?php echo "<img src='images/course.png' alt='图片' class='left_img2'";?>
					<span>我的作业</span>
				</span>
				<canvas id="canvas_index2" width="18" height="48"></canvas>
			</a></li>
			<li><a href="mycourse.php" class="li_a">
				<span class="text">
					<?php echo "<img src='images/mycourse.png' alt='图片' class='left_img3'";?>
					<span>我的课程</span>
				</span>
				<canvas id="canvas_index3" width="18" height="48"></canvas>
			</a></li>
			<li><a href="per_setup.php" class="li_a">
				<span class="text">
					<?php echo "<img src='images/setup.png' alt='图片' class='left_img4'";?>
					<span>个人设置</span>
				</span>
				<canvas id="canvas_index4" width="18" height="48"></canvas>
			</a></li>
			<li><a href="" class="li_a">
				<span class="text">
					<?php echo "<img src='images/help.png' alt='图片' class='left_img5'";?>&nbsp;
					<span>帮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;助</span>
				</span>
				<canvas id="canvas_index5" width="18" height="48"></canvas>	
			</a></li>
		</ul>
	</div>

	<!-- 右边内容 -->
	<div class="center_content">
		<div class="mui-content">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">未完成作业（7）</a>
					<a class="mui-control-item" href="#item2">已完成作业（20）</a>
				</div>
				<div class="line"></div>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view" id="mui-table-view">
								<li class="mui-table-view-cell mui-table-line">
									<img class="img_java" src="images/Java.jpg">
									<div class="block-right">
										<p>来自&nbsp;&nbsp;<span class="block-right-1">数据结构</span>&nbsp;&nbsp;课程</p>
										<p class="block-right-1">基于双向链表的电话簿的设计和实现</p>
										<p>请于2018年5月14日前提交作业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前已有<span class="block-right-2">7</span>人提交过作业</p>
									</div>
									<!-- <form class="mui-form-submit"> -->
										<a class="mui-cell-link" href="nofinishtask.php">我要写作业</a>
									<!-- </form> -->
								</li>
								<li class="mui-table-view-cell mui-table-line">
									<img class="img_java" src="images/Java.jpg">
									<div class="block-right">
										<p>来自&nbsp;&nbsp;<span class="block-right-1">数据结构</span>&nbsp;&nbsp;课程</p>
										<p class="block-right-1">基于双向链表的电话簿的设计和实现</p>
										<p>请于2018年5月14日前提交作业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前已有<span class="block-right-2">7</span>人提交过作业</p>
									</div>
									<!-- <form class="mui-form-submit"> -->
										<a class="mui-cell-link" href="nofinishtask.php">我要写作业</a>
									<!-- </form> -->
								</li>
								<li class="mui-table-view-cell mui-table-line">
									<img class="img_java" src="images/Java.jpg">
									<div class="block-right">
										<p>来自&nbsp;&nbsp;<span class="block-right-1">数据结构</span>&nbsp;&nbsp;课程</p>
										<p class="block-right-1">基于双向链表的电话簿的设计和实现</p>
										<p>请于2018年5月14日前提交作业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当前已有<span class="block-right-2">7</span>人提交过作业</p>
									</div>
									<!-- <form class="mui-form-submit"> -->
										<a class="mui-cell-link" href="nofinishtask.php">我要写作业</a>
									<!-- </form> -->
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view" id="mui-table-view">
						<li class="mui-table-view-cell mui-table-line">
									<img class="img_java" src="images/Java.jpg">
									<div class="block-right">
										<p>来自&nbsp;&nbsp;<span class="block-right-1">数据结构</span>&nbsp;&nbsp;课程</p>
										<p class="block-right-1">基于双向链表的电话簿的设计和实现</p>
										<p><span class="block-right-2">35</span>人提交作业&nbsp;&nbsp;<span class="block-right-2">3</span>人未提交
										&nbsp;&nbsp;最高分<span class="block-right-2">97</span>&nbsp;&nbsp;最低分<span class="block-right-2">45</span>
										</p>
									</div>
									<p class="mui-cell-p-1">95分</p>
									
										<a class="mui-cell-link" href="finishtask.php">查看作业</a>
									
						</li>
						<li class="mui-table-view-cell mui-table-line">
									<img class="img_java" src="images/Java.jpg">
									<div class="block-right">
										<p>来自&nbsp;&nbsp;<span class="block-right-1">数据结构</span>&nbsp;&nbsp;课程</p>
										<p class="block-right-1">基于双向链表的电话簿的设计和实现</p>
										<p><span class="block-right-2">35</span>人提交作业&nbsp;&nbsp;<span class="block-right-2">3</span>人未提交
										&nbsp;&nbsp;最高分<span class="block-right-2">97</span>&nbsp;&nbsp;最低分<span class="block-right-2">45</span>
										</p>
									</div>
									<p class="mui-cell-p-1">95分</p>
									
										<a class="mui-cell-link" href="finishtask.php">查看作业</a>
								
						</li>
						<li class="mui-table-view-cell mui-table-line">
									<img class="img_java" src="images/Java.jpg">
									<div class="block-right">
										<p>来自&nbsp;&nbsp;<span class="block-right-1">数据结构</span>&nbsp;&nbsp;课程</p>
										<p class="block-right-1">基于双向链表的电话簿的设计和实现</p>
										<p><span class="block-right-2">35</span>人提交作业&nbsp;&nbsp;<span class="block-right-2">3</span>人未提交
										&nbsp;&nbsp;最高分<span class="block-right-2">97</span>&nbsp;&nbsp;最低分<span class="block-right-2">45</span>
										</p>
									</div>
									<p class="mui-cell-p-1">未批阅</p>
									<!-- <form class="mui-form-submit"> -->
										<a class="mui-cell-link" href="finishtask.php">查看作业</a>
									<!-- </form> -->

						</li>
					</ul>
				</div>
			</div>
		</div><br/>
	</div>

	<!-- 右侧栏 -->
	<?php
		include_once("right_content.php");
	?>
</div>

<!-- 加载左边导航的样式 -->
<?php
	include_once("nav_style.php");
?>

<!-- 加载底部信息 -->
<?php
	include_once("footer.php");
?>


<script src="js/mui.min.js"></script>
<script>
mui.init({
	swipeBack: true //启用右滑关闭功能
});
(function($) {
	$('#scroll').scroll({
		indicators: true //是否显示滚动条
	});
	var segmentedControl = document.getElementById('segmentedControl');
	$('.mui-input-group').on('change', 'input', function() {
		if (this.checked) {
			var styleEl = document.querySelector('input[name="style"]:checked');
			var colorEl = document.querySelector('input[name="color"]:checked');
			if (styleEl && colorEl) {
				var style = styleEl.value;
				var color = colorEl.value;
				segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
			}
		}
	});
})(mui);
</script>
</body>
</html>